<template>
	<div class="library_base_info" v-loading="loading">
		<el-scrollbar>
			<el-form ref="form" size="medium" :model="formData" :rules="formRules" :disabled="disabled">
				<el-form-item label="资源库名称" prop="name" class="column2">
					<el-input v-model="formData.name" maxlength="25" style="width: 643px"></el-input>
					<p class="tips">由汉字、数字、英文字母或下划线组成，长度不超过25字符</p>
				</el-form-item>
				<el-form-item label="入库审核" prop="addAudit" class="column1">
					<el-switch v-model="formData.addAudit" active-value="1" inactive-value="2"></el-switch>
					<p class="tips">关闭后，文件无需审核，可直接录入</p>
				</el-form-item>
				<el-form-item label="出库审核" prop="outAudit" class="column1">
					<el-switch v-model="formData.outAudit" active-value="1" inactive-value="2"></el-switch>
					<p class="tips">关闭后，文件无需审核，可直接出库</p>
				</el-form-item>
				<el-form-item label="下载审核" prop="downAudit" class="column1">
					<el-switch v-model="formData.downAudit" active-value="1" inactive-value="2"></el-switch>
					<p class="tips">关闭后，下载无需审核，可直接上传</p>
				</el-form-item>
				<el-form-item label="录入编目" prop="addCatalog" class="column1">
					<el-switch v-model="formData.addCatalog" active-value="1" inactive-value="2"></el-switch>
					<p class="tips">关闭后，文件无需编目，可直接上传</p>
				</el-form-item>
				<el-form-item label="录入标签" prop="addLabel" class="column1">
					<el-switch v-model="formData.addLabel" active-value="1" inactive-value="2"></el-switch>
					<p class="tips">关闭后，标签无需录入，可直接上传</p>
				</el-form-item>
				<el-form-item label="库标签" class="column2">
					<el-select v-model="formData.libraryList" multiple placeholder="请选择库标签" style="width: 682px">
						<el-option v-for="(item, index) in libraryTypeData" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="资源库封面" prop="coverId" class="column2">
					<el-radio-group v-model="coverType" :aria-hidden="false">
						<el-radio v-for="(item, index) in libraryCovers" :key="index" :label="item.value">{{ item.msg }}</el-radio>
						<el-radio label="100">自定义</el-radio>
						<el-radio label="101" v-if="coverType === '101'">附件缺失</el-radio>
					</el-radio-group>
					<cover-select v-model="formData.coverId" :type="coverType" :init-value="initCover"></cover-select>
				</el-form-item>
			</el-form>
		</el-scrollbar>
		<div class="button" v-if="!disabled">
			<el-button size="medium" @click="handleCloseDialog">取消</el-button>
			<el-button size="medium" type="primary" @click="handleSubmitForm">{{ addOrEdit ? '新增' : '修改' }}</el-button>
		</div>
	</div>
</template>

<script>
import lodash from 'lodash';
import coverSelect from './coverSelect';
import { queryLibrarySetting, addedLibrary, updateLibrary } from '@/api/data/tbNetDiskDir';
export default {
	inject: ['libraryTypes'],
	components: { coverSelect },
	props: {
		libraryId: { type: String, default: '' },
		disabled: { type: Boolean, default: false }
	},
	data() {
		return {
			formData: {},
			coverType: '',
			initCover: '',
			loading: false,
			checkedLabels: [],
			formRules: {
				name: [{ required: true, message: '请输入资源库名称', trigger: 'blur' }]
			}
		};
	},
	computed: {
		addOrEdit() {
			return !this.libraryId;
		},
		callFunction() {
			return eval(this.addOrEdit ? addedLibrary : updateLibrary);
		},
		libraryTypeData() {
			return this.libraryTypes().filter((item) => item.id !== '-1');
		},
		libraryCovers() {
			return this.$store.state.common.dictEnums['RESOURCES_CATEGORY'];
		}
	},
	watch: {
		libraryId: {
			handler() {
				if (!this.addOrEdit) {
					this.loading = true;
					this.getLibraryData();
				} else {
					this.coverType = '1';
				}
			},
			immediate: true
		}
	},
	methods: {
		//获取资源库详情
		async getLibraryData() {
			let result = await queryLibrarySetting(this.libraryId).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				this.initLibraryData(datas);
			}
		},

		//初始化表单数据
		initLibraryData(data) {
			console.log(data);
			let params = { ...data };
			let libDirList = params.libDirList || [];
			let libDirArrs = libDirList.map((n) => n.libraryId);
			if (!params.coverId || params.coverId === '-1' || !params.coverInfo) {
				this.coverType = '1';
			} else if (params.coverInfo.category === '-1') {
				this.coverType = '100';
			} else {
				this.coverType = params.coverInfo.category;
				this.initCover = lodash.cloneDeep(params.coverId);
			}
			params['libraryList'] = lodash.uniq(libDirArrs);
			this.checkedLabels = lodash.cloneDeep(params.libraryList);
			this.formData = { ...params };
		},

		//关闭弹窗
		handleCloseDialog() {
			this.$parent.$parent.visible = false;
		},

		//提交库基本信息
		handleSubmitForm() {
			this.$refs['form'].validate(async (valid) => {
				if (!valid) return false;
				this.libraryInfoRequest();
			});
		},

		//格式化表单参数
		formatFormParams() {
			let params = { ...this.formData };
			let diskQuota = this.$store.state.dictConst['LIB_DEFAULT_SIZE'];
			let addArrs = params.libraryList.filter((item) => !this.checkedLabels.some((n) => n === item));
			let delArrs = this.checkedLabels.filter((item) => !params.libraryList.some((n) => n === item));
			let addTypes = addArrs.map((n) => ({ relId: n, operType: '1' }));
			let delTypes = delArrs.map((n) => ({ relId: n, operType: '2' }));
			return { ...params, diskQuota, libraryList: [...addTypes, ...delTypes] };
		},

		//库信息新增编辑请求
		async libraryInfoRequest() {
			let params = this.formatFormParams();
			let result = await this.callFunction(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success(`${this.addOrEdit ? '添加' : '修改'}资源库成功`);
				this.$parent.$parent.$parent.$emit('refresh');
				this.handleCloseDialog();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.library_base_info ::v-deep {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex: 1;
	.el-scrollbar {
		height: 100%;
		overflow: hidden;
	}
	.el-scrollbar__wrap {
		overflow: hidden;
		overflow-y: scroll;
		padding-bottom: 6px;
	}
	.el-form {
		display: flex;
		flex-wrap: wrap;
		padding: 32px 32px 10px;
	}
	.el-form-item.column2 {
		width: 100%;
	}
	.el-form-item.column1 {
		width: 50%;
	}
	p.tips {
		color: #999;
		line-height: 1;
		margin-top: 6px;
	}
	.button {
		padding: 16px;
		flex-shrink: 0;
		text-align: right;
		border-top: solid 1px #ebeef5;
	}
	.el-form-item__label {
		font-weight: bold;
	}
}
</style>
